@import "./common.scss";

.wrap {
  main {
    .user_top {
      width: 100%;
      height: getvw(180);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user_head_left {
        width: getvw(180);
        height: getvw(180);
        border-radius: 50%;
        background-color: pink;
      }
      .user_top_mid {
        width: getvw(440);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        p:first-child {
          font-size: getfs(30);
          font-weight: 500;
        }
        p:last-child {
          font-size: getfs(16);
          margin-top: getvw(30);
          color: #999;
        }
      }
      .user_top_right {
        width: getvw(55);
        height: 100%;
        a {
          line-height: getvw(180);
          display: block;
          font-size: getfs(60);
          font-weight: bold;
        }
      }
    }
    .col-3-Items {
      margin-top: getvw(20);
      width: 100%;
      height: getvw(150);
      display: flex;
      justify-content: space-between;
      .col-3-item {
        width: getvw(195);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .iconWhite {
          color: #fff;
          font-size: getfs(70);
        }
        span {
          margin-top: getvw(10);
          font-size: getfs(26);
        }
        &:first-child {
          background-color: #b2e0a0;
        }
        &:nth-child(2) {
          background-color: #a0dce0;
        }
        &:last-child {
          background-color: #e0b7a0;
        }
      }
    }
    .title-row {
      margin: getvw(40) 0;
      .topTitle {
        .title {
          .iconTitle {
            font-size: getfs(85);
            margin: 0 getvw(10);
            color: orange;
          }
          h3 {
            font-size: getfs(20);
            font-weight: bold;
          }
          .iconfindF {
            color: greenyellow;
          }
          .iconZuji {
            color: skyblue;
          }
          .iconShizhi,
          .iconLianxi {
            font-size: getfs(100);
          }
        }
      }
    }
    .btnBox {
      width: 100%;
      height: getvw(85);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .btn {
        width: getvw(145);
        height: getvw(75);
        border-radius: getvw(75);
        background-color: #ff9344;
        font-size: getfs(26);
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: getvw(75);
      }
    }
  }
}
